<template>
  <view>
    <my-goods v-for="item in goodsList" :key="item.goods_id" :goods="item" />
  </view>
</template>

<script>
export default {
  data() {
    return {
      queryObj: {
        query: "", // 关键字
        cid: "", // 分类id
        pagenum: 1, //页码
        pagesize: 10, // 页容量
      },
      goodsList: [], //查询到的商品列表
      total: 0, //总条数
      isLoadingMore: false, // 假如没开启上拉加载写成false比较好

      isPullDown: false,
    };
  },
  onLoad(options) {
    this.queryObj.query = options.query || "";
    this.queryObj.cid = options.cid || "";
    this.getGoodsListData();
  },
  // https://developers.weixin.qq.com/miniprogram/dev/reference/api/Page.html  //wx小程序的API
  // 下拉刷新 即开始重新加载第一次的数据
  onPullDownRefresh() {
    this.goodsList = []; //先设为空，后面加载第一页数据
    this.queryObj.pagenum = 1; // 页码
    this.total = 0;
    this.getGoodsListData(true); // 传true是为了去掉加载中的轻提示
  },
  // https://developers.weixin.qq.com/miniprogram/dev/reference/api/Page.html  //wx小程序的API
  // 上拉刷新
  onReachBottom() {
    // console.log("----11---");
    // 场景：假如用户网络差，还疯狂下拉，可能导致data的queryObj参数还没请求到，就页码一直pagenum++，会导致上拉很后的页面没数据，需要使用节流控制请求成功后再开启上拉请求
    // 如果有请求正在发送,则return,不发送请求
    if (this.isLoadingMore) return; // 能return 说明用户正在请求数据

    // 上拉刷新已经到最底下了，提示用户并return
    if (this.goodsList.length >= this.total) {
      uni.showToast({
        title: "已经到底了",
        icon: "none",
        mask: true,
      });
      return;
    }
    // 上拉后则页码++
    this.queryObj.pagenum++;
    // 重新请求下一页
    this.getGoodsListData();
  },
  methods: {
    // 请求列表数据
    async getGoodsListData(isPullDown) {
      this.isLoadingMore = true; // 开启上拉请求数据
      const res = await uni.$request({
        url: "goods/search",
        data: this.queryObj,
        isPullDown,
      });
      // console.log("res:", res);
      if (res.meta.status == 200) {
        // 将数据赋值给data
        // 由于上拉刷新page++重新请求的列表直接赋值会覆盖原来的goodsList，需要使用拓展语法将他们集中在一起
        this.goodsList = [...this.goodsList, ...res.message.goods];
        this.total = res.message.total;
      }
      // console.log("this.goodsList:", this.goodsList);
      this.isLoadingMore = false; // 上拉请求数据已经请求到，关闭isLoadingMore，进行节流
      if (isPullDown) {
        uni.stopPullDownRefresh(); // res数据在前面已经请求好了，下拉刷新Loading效果三个...还在加载，使用stopPullDownRefresh可以关掉
      }
    },
  },
};
</script>

<style>
</style>